import { useState, memo, useCallback, useRef, FC, Fragment } from 'react';
import { Input, List, Button } from 'antd'
import { TodoItem, TodoListProps } from '../../omd.d'
import { TodoListContainer } from '../../oms.style'

// 渲染列表组件
const TodoView:FC<TodoListProps> = memo((props) => {
  const { todos, toggleClick, removeClick } = props
  // key值作用？diff比较 最小化比较
  return <div>
    <List>
      {
        todos?.map(item => {
          return (
            <Fragment key={item.id}>
             <List.Item
             className={item.checked ? 'active': ''}
             >{item.name}</List.Item>
             <Button
             size='small' type="dashed" onClick={() => {
              toggleClick && toggleClick(item)
             }}>切换</Button>
             <Button
             size='small' type="primary" onClick={() => {
              removeClick && removeClick(item)
             }}>删除</Button>
            </Fragment>
          )
        })
      }

    </List>
  </div>
})
export default TodoView;
